<template>
  <div style="height: 100%">
    <div class="container" style="height: 100%">
      <div style="width: 380px; flex-shrink: 0; border-radius: 2px">
        <div class="title_1">企业基本信息</div>
        <el-form
          :model="form_data"
          label-width="130px"
          label-position="left"
          style="padding: 0 30px"
          class="coordinate"
        >
          <el-form-item label="企业住所">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 1, maxRows: 4 }"
              placeholder="请输入企业住所"
              v-model="form_data.addr"
              disabled
            ></el-input>
          </el-form-item>
          <div style="margin: 0 0 10px 130px">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 1, maxRows: 4 }"
              placeholder="请输入详细地址"
              v-model="form_data.address"
              disabled
            ></el-input>
          </div>

          <el-form-item label="企业名称">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 1, maxRows: 4 }"
              placeholder="请输入企业名称"
              v-model="form_data.name"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="统一社会信用代码">
            <el-input
              type="textarea"
              resize="none"
              :autosize="{ minRows: 1, maxRows: 4 }"
              placeholder="请输入"
              v-model="form_data.code"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input placeholder="请输入" disabled v-model="form_data.phone"></el-input>
          </el-form-item>
          <!-- <div class="tr m_top10">
          <el-button type="primary">保存</el-button>
        </div> -->
        </el-form>
      </div>
      <div class="m_left20" style="width: calc(100% - 400px); border-radius: 2px">
        <div class="p_20" style="height: calc(100% - 40px)" v-if="show_right">
          <div class="top_box">
            <div v-for="(item, index) in top_list" :key="item.id">
              <div
                v-if="item.has_role && index == 0"
                :class="top_index == index ? 'top_select' : ''"
                @click="top_index = index"
              >
                <div>{{ item.dictValue }}</div>
                <div></div>
              </div>
            </div>
          </div>
          <el-divider style="margin-bottom: 10px"></el-divider>
          <div
            v-show="top_index == 0 && top_list[top_index].has_role"
            class="p_rel"
            style="height: calc(100% - 62px); width: 100%"
          >
            <deepPlugin style="height: 100%; width: 100%"></deepPlugin>
          </div>
          <!-- <div v-show="top_index == 1 && top_list[top_index].has_role">
            <threeDdesign style="height: 100%; width: 100%"></threeDdesign>
          </div> -->
          <div v-show="[1, 2, 3].includes(top_index)" class="flex_cc h_100">
            <div>
              <img src="@/assets/img/no_more.png" style="width: 200px" alt="" />
              <div class="c_999 fs_14 tc">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { dictData, check_role } from "@/utils/check_role"; // 权限校验
import deepPlugin from "./component/deepPlugin.vue";
import { ref, onMounted, onUnmounted, computed } from "vue";
import { ElMessage } from "element-plus";
import axios from "@/service/HttpRequest";
import serviceApi from "@/service/api";
import { useStore } from "vuex";
import { getCookie } from "@/utils/cookie";
import EventBus from "@/utils/EventBus";
const has_role_list = ref([
  {
    path: "/deepPlugin",
    has_role: false,
  },
  {
    path: "/3Ddesign",
    has_role: false,
  },
  {
    path: "/climbDesign",
    has_role: false,
  },
  {
    path: "/digitalTwins",
    has_role: false,
  },
]);
const store = useStore();
const form_data = ref({
  many_organization: false,
  is_share: false,
  share_area: [],
  addr: "",
  address: "",
  name: "",
  code: "",
  phone: "",
});

const enterprise_id = computed(() => {
  return store.state.enterprise_id != "" // 当前登录企业 vuex > cookie > list[0]
    ? store.state.enterprise_id
    : getCookie("enterprise_id");
});
const top_list = ref([]);
const top_index = ref(-1);
const show_right = ref(true);
onMounted(() => {
  reloading();
  EventBus.on("has_role", () => {
    show_right.value = true;
  });
  EventBus.on("change_default_active", () => {
    top_index.value = -1;
    reloading();
  });
  EventBus.on("no_role", () => {
    form_data.value = {
      many_organization: false,
      is_share: false,
      share_area: [],
      addr: "",
      address: "",
      name: "",
      code: "",
      phone: "",
    };
    show_right.value = false;
  });
});
const reloading = () => {
  dictData("1541665967619182594").then((res) => {
    has_role_list.value.forEach((item, index) => {
      if (check_role(item) && top_index.value == -1) {
        top_index.value = index;
      }
      res[index].has_role = check_role(item);
    });
    top_list.value = res as any;
  }); // 获取字典值 产品分类
  get_enterprise_info();
};
onUnmounted(() => {
  EventBus.off("change_default_active");
});
const get_enterprise_info = () => {
  axios
    .request({
      url: serviceApi.enterprise_info + "/" + enterprise_id.value,
      method: "get",
    })
    .then((res) => {
      console.log(res);
      form_data.value.name = res.data.name;
      form_data.value.address = res.data.detailAddress;
      form_data.value.code = res.data.uniformCreditCode;
      form_data.value.phone = res.data.telephone;
      form_data.value.addr =
        res.data.province + "/" + res.data.city + "/" + res.data.district;
    })
    .catch((err) => {
      ElMessage.error(err);
    });
};
</script>

<style lang="scss" scoped>
:deep(.coordinate) {
  .el-input__inner {
    padding-right: 11px !important;
  }
}
.top_box {
  display: flex;
  align-items: center;
  column-gap: 20px;
  padding-bottom: 20px;
  font-weight: bold;
  cursor: pointer;
  > div > div {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    > div:last-child {
      width: 28px;
      height: 3px;
      margin: 0 auto;
      background-color: #fff;
    }
  }
  .top_select {
    color: #3580eb;
    div:last-child {
      background-color: #3580eb;
    }
  }
}
.tabs_box {
  display: flex;
  align-items: center;
  > div {
    cursor: pointer;
    p {
      padding: 0 20px;
      height: 25px;
    }
    > div {
      width: 28px;
      height: 3px;
      background-color: #fff;
      margin: 0 auto;
    }
  }
  .select {
    color: #3580eb;
    > div {
      background-color: #3580eb;
    }
  }
}
.el-switch {
  --el-switch-button-size: 18px;
}
:deep(.el-switch__action) {
  top: 5px;
  left: 5px;
}
:deep(.el-switch__inner) {
  top: 5px;
  left: 55%;
  font-size: 12px;
  color: #fff;
}
:deep(.el-switch__core) {
  width: 54px !important;
  border-radius: 14px;
  height: 28px;
  background: #b1b4bc !important;
  border: #b1b4bc !important;
  &:after {
    width: 18px;
    height: 18px;
    background: #78849f;
    top: -5px;
    left: -1px;
  }
}
:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #3580eb !important;
  &:after {
    width: 18px;
    height: 18px;
    background-color: #3580eb !important;
    top: -5px;
    left: 44px;
  }
  .el-switch__action {
    margin-left: calc(-5px - 18px);
  }
}
.title_1 {
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #c5c8ca;
  height: 48px;
  line-height: 48px;
  padding: 0 15px;
}
.container {
  display: flex;
  align-items: center;
  > div {
    height: 100%;
    background-color: #fff;
  }
}
</style>
